body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

}
.bg {
    position:fixed;
    width:100%;
    height:100%;
    z-index:-10;
    background: url(https://pic.imgdb.cn/item/65157022c458853aefc0cf37.jpg) no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
}
.head {
    width: 100%;
    margin: 0;
    display: flex;
}
.topBox {
    width: 100%;
}
.ui {
    width: 100%;
    height: 50px;
    list-style: none;
}
.ui li {
    float: left;
}
.ui li img {
    height: 40px;
    vertical-align:middle;
}
.ui li span {
    font-size: 25px;
    vertical-align:middle;
}
.ui li a{
    color: black;
    text-decoration: none;
}
.main {
    background-color: #e6bc9450;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 70%;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 12px rgba(6,1,1,999);
    position: absolute;
}
.ale {
    text-align: center;
}
.scr {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 20%;
    text-align: center;
}
.logScr {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
}
.stopLog {
    color: #000000;
    font-size: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.startBtn {
    box-shadow: 0 0 12px rgba(6,1,1,999);
    width: 200px;
    height: 123px;
    color: #000000;
    background: #e6bc9450;
    border-radius: 10px;
    font-size: 30px;
}
.startBtn:hover {
    color: #ffffff;
    background-color: #000000;
    -webkit-box-shadow: 10px 10px 99px 6px rgb(223, 229, 231);
    -moz-box-shadow: 10px 10px 99px 6px rgb(206, 209, 210);
    box-shadow: 10px 10px 99px 6px rgb(223, 235, 235);
}
.footer {
    height: 20px;
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    padding: 15px;
}
.footCC a {
    text-decoration: none;
    color: #000000;
}
.downBtn {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
}
.download {
    box-shadow: 0 0 12px rgba(6,1,1,999);
    width: 200px;
    height: 80px;
    color: #000000;
    background: #e6bc9450;
    border-radius: 10px;
    font-size: 30px;
}
.download:hover {
    color: #ffffff;
    background-color: #000000;
    -webkit-box-shadow: 10px 10px 99px 6px rgb(223, 229, 231);
    -moz-box-shadow: 10px 10px 99px 6px rgb(206, 209, 210);
    box-shadow: 10px 10px 99px 6px rgb(223, 235, 235);
}
.replay {
    box-shadow: 0 0 12px rgba(6,1,1,999);
    width: 200px;
    height: 80px;
    color: #000000;
    background: #e6bc9450;
    border-radius: 10px;
    font-size: 30px;
}
.replay:hover {
    color: #ffffff;
    background-color: #000000;
    -webkit-box-shadow: 10px 10px 99px 6px rgb(223, 229, 231);
    -moz-box-shadow: 10px 10px 99px 6px rgb(206, 209, 210);
    box-shadow: 10px 10px 99px 6px rgb(223, 235, 235);
}
.stop {
    box-shadow: 0 0 12px rgba(6,1,1,999);
    width: 200px;
    height: 80px;
    color: #000000;
    background: #e6bc9450;
    border-radius: 10px;
    font-size: 30px;
}
.stop:hover {
    color: #ffffff;
    background-color: #000000;
    -webkit-box-shadow: 10px 10px 99px 6px rgb(223, 229, 231);
    -moz-box-shadow: 10px 10px 99px 6px rgb(206, 209, 210);
    box-shadow: 10px 10px 99px 6px rgb(223, 235, 235);
}
:root {
    --h: 250px;
  }
  .container {
    display: flex;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    height: var(--h);
  }
  .container span {
    background: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
    width: 50px;
    height: 20%;
    border-radius: calc(var(--h) * 0.2 * 0.5);
    margin-right: 4px;
    animation: loading 2.5s infinite linear;
    animation-delay: calc(0.2s * var(--d));
  }
  .container span:last-child {
    margin-right: 0px;
  }
  @keyframes loading {
    0% {
      background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
      height: 20%;
      border-radius: calc(var(--h) * 0.2 * 0.5);
    }
    50% {
      background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
      height: 100%;
      border-radius: calc(var(--h) * 1 * 0.5);
    }
    100% {
      background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
      height: 20%;
      border-radius: calc(var(--h) * 0.2 * 0.5);
    }
  }